<template>
  <div class="topBack">
    <!-- 商品分类顶部选项卡 -->
    <div class="end wrap">
      <span class="goods-tab">商品分类</span>
      <!-- <keep-alive include="container"> -->
      <span v-for="(tab, index) in categoryList" :key="index">
        <span
          :class="currentIndex == index ? 'active-tab' : 'common-tab'"
          @click="tabClick(tab, index)"
          >{{ tab.categoryName
          }}<span :class="currentIndex == index ? 'bgc-bottom' : ''"></span
        ></span>
      </span>
      <!-- </keep-alive> -->
      <!-- <span :class="!tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab1')">首页<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab2')">类别一<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab3')">类别二<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab4')">类别三<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab5')">类别四<span v-show="tabActive" class="bgc-bottom"></span></span>
      <span :class="tabActive ? 'active-tab' : 'common-tab'" @click="tabClick('tab6')">类别五<span v-show="tabActive" class="bgc-bottom"></span></span> -->
    </div>
    <!-- 左侧商品分类 轮播图 登录注册 -->
    <div class="wrap slideshow">
      <div class="left-wrap">
        <div v-for="(item, indx) in goodslist" :key="indx" class="goods-wrap">
          <div class="title">
            <span>{{ item.categoryName }}</span>
            <span class="right-line"> > </span>
          </div>

          <span
            v-for="(good, index) in item.categoryDTOList"
            :key="good.id"
            class="goods"
          >
            <span class="good-item" @click="goodDetail(good)">{{
              good.categoryName
            }}</span>
            <span
              v-if="item.categoryDTOList.length - 1 !== index"
              class="end-line"
              >|</span
            >
          </span>
        </div>
      </div>
      <div class="middle-wrap">
        <el-carousel :autoplay="false" style="height: 460px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <el-image
              :src="item.bannerPhoto"
              fit="fill"
              @click.native="goBannerDetail(item)"
              style="width: 750px; height: 430px"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="login">
        <div class="right-wrap">
          <img
            alt=""
            :src="shopcarList.img || '/images/user avatar.png'"
            width="70px"
            height="70px"
          />
          <span style="margin-top: 15px" v-if="user"
            >HI！欢迎<span class="userName">{{ shopcarList.userName }}</span
            >来到丛台工业品集采</span
          >
          <span style="margin-top: 15px" v-else
            >HI！欢迎来到丛台工业品集采</span
          >
          <div class="btn-wrap btnCar" v-if="user">
            <div>
              <span>{{ shopcarList.pendingShipmentQuantity }}</span>
              <p>待收货</p>
            </div>
            <div>
              <span>{{ shopcarList.pendingDeliveryQuantity }}</span>
              <p>待发货</p>
            </div>
            <div>
              <span>{{ shopcarList.pendingPaymentQuantity }}</span>
              <p>待付款</p>
            </div>
            <div>
              <span>{{ shopcarList.pendingReviewCount }}</span>
              <p>待评价</p>
            </div>
            <!-- <el-button type="primary" @click="$store.dispatch('user/logout')">退出登录</el-button> -->
          </div>
          <div class="btn-wrap" v-else>
            <el-button type="primary" @click="goLogin">登录</el-button>
            <el-button plain @click="goRegister">注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 全部分类专区 -->
    <div
      v-for="item in categoryList"
      :style="{
        height:
          item.goodsList && (item.goodsList.length > 4 ? '758px' : '411px'),
      }"
      :key="item.id"
      class="wrap hardware"
    >
      <div class="geton">
        <img alt="" height="54px" src="/images/left.png" width="450px" />
        <div>
          <h1>{{ item.categoryName }}</h1>
        </div>
        <img alt="" height="54px" src="/images/right.png" width="450px" />
      </div>
      <div class="hard">
        <div class="bottom">
          <!-- <img :src="item.img" alt="" width="232px" height="317px" style="grid-row-end: 2" /> -->
          <img
            :src="item.img"
            :style="{
              height:
                item.goodsList &&
                (item.goodsList.length > 4 ? '645px' : '317px'),
            }"
            alt=""
            width="232px"
          />
          <div
            v-for="(tate, index) in item.goodsList"
            :key="tate.id"
            :style="{ gridColumn: index == 4 ? 2 : '' }"
            class="rightBottom"
            @click="goodDetailGoods(tate)"
          >
            <img :src="tate.thumb" alt="" height="219px" width="232px" />
            <p class="upTitle">
              {{ tate.name }}{{ item.goodsList && item.goodsList.length }}
            </p>
            <p class="boTitle">
              ¥{{ tate.priceCurrent / 100 }}/{{ tate.unit }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 五金工具 -->
    <!-- <div class="hardware wrap">
      <div class="geton">
        <img src="/images/left.png" width="450px" alt="" height="54px" />
        <div><h1>五金工具</h1></div>
        <img src="/images/right.png" width="450px" alt="" height="54px" />
      </div>
      <div class="hard">
        <div class="bottom">
          <img
            src="/images/25.png"
            alt=""
            width="232px"
            height="664px"
            style="grid-row-end: 2"
          />
          <div
            class="rightBottom"
            :style="{ gridColumn: idx == 4 ? 2 : '' }"
            v-for="(tate, idx) in categoryList[1].goodsList"
            :key="tate.id"
            @click="goodDetail(tate)"
          >
            <img :src="tate.thumb" alt="" width="232px" height="219px" />
            <p class="upTitle">{{ tate.name }}</p>
            <p class="boTitle">¥{{ tate.priceCurrent }}/{{ tate.quantity }}</p>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 劳动保护 -->
    <!-- <div class="wrap comfort">
      <div class="geton">
        <img src="/images/left.png" width="450px" alt="" height="54px" />
        <div><h1>劳保防护</h1></div>
        <img src="/images/right.png" width="450px" alt="" height="54px" />
      </div>
      <div class="bottom">
        <img src="/images/18.png" alt="" width="232px" height="317px" />
        <div
          class="rightBottom"
          v-for="tate in categoryList[2].goodsList"
          :key="tate.id"
          @click="goodDetail(tate)"
        >
          <img :src="tate.thumb" alt="" width="232px" height="219px" />
          <p class="upTitle">{{ tate.name }}</p>
          <p class="boTitle">¥{{ tate.priceCurrent }}/{{ tate.quantity }}</p>
        </div>
      </div>
    </div> -->
    <!-- 猜你喜欢 -->
    <div class="youLike">
      <div class="wrap youLike2">
        <div class="geton">
          <img alt="" height="54px" src="/images/left.png" width="450px" />
          <div>
            <h1>猜你喜欢</h1>
          </div>
          <img alt="" height="54px" src="/images/right.png" width="450px" />
        </div>
        <!-- <div class=""> -->
        <div class="bottom">
          <div
            v-for="tate in youLike"
            :key="tate.id"
            class="rightBottom"
            @click="goodDetailGoods(tate)"
          >
            <img :src="tate.thumb" alt="" height="219px" width="232px" />
            <p class="upTitle">{{ tate.name }}</p>
            <p class="boTitle">
              ¥{{ tate.priceCurrent / 100 }}/{{ tate.unit }}
            </p>
          </div>
          <div
            v-for="(item, index) in 5 - (youLike.length % 5)"
            style="width: 232px"
            :key="index"
          ></div>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <!-- 平台优势 -->
    <div class="wrap">
      <div>
        <img alt="" height="54px" src="/images/37.png" width="1240px" />
      </div>
      <div class="advantage">
        <div>
          <img alt="" height="90px" src="/images/38.png" width="90px" />
          <h3>快递100为您实时查询物流</h3>
          <span
            >为您提供贴心、精准、实时的快递单号 查询，自动跟踪您的快递进度</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/39.png" width="90px" />
          <h3>安全的支付方式</h3>
          <span
            >使用全球领先的独立第三方支付平台，为
            广大用户提供安全快速的手机支付</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/40.png" width="90px" />
          <h3>顾客购物</h3>
          <span>24小时疯狂购，随时随地可购物，我 们随时为你提供服务</span>
        </div>
        <div>
          <img alt="" height="90px" src="/images/41.png" width="90px" />
          <h3>支付宝为您提供快速支付</h3>
          <span>支付宝为你提供简单、安全、快速的支付， 让您购物更省心</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanners, // 轮播图
  getCategoryShow,
  getMostView, //猜你喜欢
  getCategoryList,
  getShoppingcarInfo,
  tMadAdRecrodAdd, //广告点击花费
  backstagePageList,
} from "@/api/mallApi/congLinMall";
import store from "@/store";

export default {
  name: "mallProjectContainer",
  data() {
    return {
      bannerList: [],
      categoryList: [],
      currentIndex: 0,
      tabList: [
        {
          label: "首页",
          name: "tab1",
        },
        {
          label: "类别一",
          name: "tab2",
        },
        {
          label: "类别一",
          name: "tab3",
        },
        {
          label: "类别一",
          name: "tab4",
        },
        {
          label: "类别一",
          name: "tab5",
        },
        {
          label: "类别一",
          name: "tab6",
        },
      ],
      goodslist: [
        // {
        //   id: 1,
        //   name: "劳动防护",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "外部防护",
        //     },
        //     {
        //       id: 2,
        //       name: "听力防护",
        //     },
        //     {
        //       id: 3,
        //       name: "护钢防护",
        //     },
        //   ],
        // },
        // {
        //   id: 2,
        //   name: "五金备件",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "水龙头",
        //     },
        //     {
        //       id: 2,
        //       name: "螺丝",
        //     },
        //     {
        //       id: 3,
        //       name: "门锁",
        //     },
        //     {
        //       id: 4,
        //       name: "备品备件",
        //     },
        //   ],
        // },
        // {
        //   id: 3,
        //   name: "工业用品",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "外部防护",
        //     },
        //     {
        //       id: 2,
        //       name: "听力防护",
        //     },
        //     {
        //       id: 3,
        //       name: "护钢防护",
        //     },
        //   ],
        // },
        // {
        //   id: 4,
        //   name: "耐火保温",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "外部防护",
        //     },
        //     {
        //       id: 2,
        //       name: "听力防护",
        //     },
        //     {
        //       id: 3,
        //       name: "护钢防护",
        //     },
        //   ],
        // },
        // {
        //   id: 4,
        //   name: "耐火保温",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "外部防护",
        //     },
        //     {
        //       id: 2,
        //       name: "听力防护",
        //     },
        //     {
        //       id: 3,
        //       name: "护钢防护",
        //     },
        //   ],
        // },
        // {
        //   id: 4,
        //   name: "耐火保温",
        //   bannerList: [
        //     {
        //       id: 1,
        //       name: "外部防护",
        //     },
        //     {
        //       id: 2,
        //       name: "听力防护",
        //     },
        //     {
        //       id: 3,
        //       name: "护钢防护",
        //     },
        //   ],
        // },
      ],
      bargain: [
        // 议价专区
        {
          id: 1,
          img: require("../../../../public/images/13.png"),
          title: "深沟球轴承 66/393.7",
          price: 4698.65,
          quantity: "套",
        },
        {
          id: 2,
          img: require("../../../../public/images/14.png"),
          title: "深沟球轴承 619/500",
          price: 8650.0,
          quantity: "套",
        },
        {
          id: 3,
          img: require("../../../../public/images/15.png"),
          title: "轴承 6306/GB276-94",
          price: 12.23,
          quantity: "个",
        },
        {
          id: 4,
          img: require("../../../../public/images/16.png"),
          title: "深沟球轴承 66/393.7",
          price: 2363.09,
          quantity: "套",
        },
      ],
      hardwares: [
        // 五金工具
        {
          id: 1,
          img: require("../../../../public/images/51.png"),
          title: "家用锂电钻工具套装",
          price: 199.0,
          quantity: "套",
        },
        {
          id: 2,
          img: require("../../../../public/images/52.png"),
          title: "威克士12V无刷手电钻",
          price: 239.0,
          quantity: "套",
        },
        {
          id: 3,
          img: require("../../../../public/images/53.png"),
          title: "威克士12V无刷手电钻",
          price: 299.0,
          quantity: "套",
        },
        {
          id: 4,
          img: require("../../../../public/images/54.png"),
          title: "威克士12V无刷手电钻",
          price: 2363.09,
          quantity: "套",
        },
        {
          id: 5,
          img: require("../../../../public/images/55.png"),
          title: "家用锂电钻工具套装",
          price: 199.0,
          quantity: "套",
        },
        {
          id: 6,
          img: require("../../../../public/images/56.png"),
          title: "威克士12V无刷手电钻",
          price: 239.0,
          quantity: "套",
        },
        {
          id: 7,
          img: require("../../../../public/images/57.png"),
          title: "威克士12V无刷手电钻",
          price: 299.0,
          quantity: "套",
        },
        {
          id: 8,
          img: require("../../../../public/images/58.png"),
          title: "威克士12V无刷手电钻",
          price: 2363.09,
          quantity: "套",
        },
      ],
      comfort: [
        // 劳保专区
        {
          id: 1,
          img: require("../../../../public/images/61.png"),
          title: "手套劳保耐磨",
          price: 7.9,
          quantity: "付",
        },
        {
          id: 2,
          img: require("../../../../public/images/62.png"),
          title: "手套劳保耐磨",
          price: 7.9,
          quantity: "付",
        },
        {
          id: 3,
          img: require("../../../../public/images/63.png"),
          title: "手套劳保耐磨",
          price: 7.9,
          quantity: "付",
        },
        {
          id: 4,
          img: require("../../../../public/images/64.png"),
          title: "手套劳保耐磨",
          price: 7.9,
          quantity: "付",
        },
      ],
      youLike: [
        // 猜你喜欢
        // {
        //   id: 1,
        //   img: require("../../../public/images/13.png"),
        //   title: "利盟（Lexmark）原装硒鼓…",
        //   price: 4698.65,
        //   quantity: "套",
        // },
        // {
        //   id: 2,
        //   img: require("../../../public/images/14.png"),
        //   title: "利盟（Lexmark）原装硒鼓…",
        //   price: 8650.0,
        //   quantity: "套",
        // },
        // {
        //   id: 3,
        //   img: require("../../../public/images/15.png"),
        //   title: "轴承 6306/GB276-94",
        //   price: 12.23,
        //   quantity: "个",
        // },
        // {
        //   id: 4,
        //   img: require("../../../public/images/16.png"),
        //   title: "深沟球轴承 66/393.7",
        //   price: 2363.09,
        //   quantity: "套",
        // },
        // {
        //   id: 5,
        //   img: require("../../../public/images/13.png"),
        //   title: "深沟球轴承 66/393.7",
        //   price: 4698.65,
        //   quantity: "套",
        // },
        // {
        //   id: 6,
        //   img: require("../../../public/images/14.png"),
        //   title: "深沟球轴承 619/500",
        //   price: 8650.0,
        //   quantity: "套",
        // },
        // {
        //   id: 7,
        //   img: require("../../../public/images/15.png"),
        //   title: "轴承 6306/GB276-94",
        //   price: 12.23,
        //   quantity: "个",
        // },
        // {
        //   id: 8,
        //   img: require("../../../public/images/16.png"),
        //   title: "深沟球轴承 66/393.7",
        //   price: 2363.09,
        //   quantity: "套",
        // },
        // {
        //   id: 9,
        //   img: require("../../../public/images/15.png"),
        //   title: "轴承 6306/GB276-94",
        //   price: 12.23,
        //   quantity: "个",
        // },
        // {
        //   id: 10,
        //   img: require("../../../public/images/16.png"),
        //   title: "深沟球轴承 66/393.7",
        //   price: 2363.09,
        //   quantity: "套",
        // },
      ],
      shopcarList: {},
    };
  },
  computed: {
    user() {
      return store.state.user.userId;
    },
  },
  created() {
    console.log("store内容", store.state.user);
    if (store.state.user.userId) {
      this.getShoppingcarInfo();
    }
    this.getBanners();
    this.getCategoryShow();
    this.getMostView();
    this.getCategoryList();
  },
  mounted() {
    // this.$bus.$on('searchGoods',(data)=>{
    //   this.getSearchGoods(data)
    // })
  },

  methods: {
    // getSearchGoods(val){
    //   backstagePageList(val).then((res)=>{
    //     console.log(res);
    //   })
    // },getCategoryShow
    goLogin() {
      window.location.href = "/login?redirect=mall%2Fcontainer";
    },
    goRegister() {
      this.$router.push({
        path: "/mall/register",
      });
    },
    getShoppingcarInfo() {
      //购物车展示信息
      getShoppingcarInfo().then((res) => {
        console.log("购物车", res);
        this.shopcarList = res.data;
      });
    },
    getBanners() {
      // 首页banner
      getBanners().then((res) => {
        console.log("首页banner", res);
        this.bannerList = res.data;
      });
    },
    getCategoryShow() {
      // 首页分类
      getCategoryShow().then((res) => {
        console.log("顶栏", res);
        this.categoryList = res.data;
      });
    },
    getMostView() {
      // 猜你喜欢
      getMostView().then((res) => {
        console.log("猜你喜欢", res);
        this.youLike = res.data;
      });
    },
    getCategoryList() {
      // 左侧商品分类
      getCategoryList().then((res) => {
        console.log("左侧商品分类", res);
        this.goodslist = res.data;
      });
    },
    tabClick(query, index) {
      console.log(query);
      query.type = "first";
      this.currentIndex = index;
      this.$router.push({
        path: "/mall/searchGoods",
        query,
      });
      // if (tab.name == 'tab2') {
      //   this.$router.push('/shopcart')
      // }
    },
    goBannerDetail(item) {
      const values = {
        adId: item.id,
      };
      if (item.btype == 1) {
        if (item.madAd) {
          tMadAdRecrodAdd(values);
        }
        this.$router.push({
          path: "/mall/product?id=" + item.bvalue,
        });
      } else {
        if (item.madAd) {
          tMadAdRecrodAdd(values);
        }
        this.$router.push({
          path: "/mall/storeDetail?mallCode=" + item.bvalue,
        });
      }
      // 1：商品详情  2：店铺详情3：活动
      // if (item.madAd) {
      //   tMadAdRecrodAdd(values);
      //   this.$router.push({
      //     path: "/mall/product?id=" + item.bvalue,
      //   });
      // } else {
      //   this.$router.push({
      //     path: "/mall/product?id=" + item.bvalue,
      //   });
      // }

      // if (item.btype == 2) {
      // }

      // if (item.madAd) {
      //   console.log("广告", values);
      //   tMadAdRecrodAdd(values);
      //   this.$router.push({
      //     path: "/mall/product?id=" + item.bvalue,
      //   });
      // } else {
      //   this.$router.push({
      //     path: "/mall/product?id=" + item.bvalue,
      //   });
      // }
    },
    goodDetail(query) {
      console.log(query);
      this.$router.push({
        path: "/mall/searchGoods",
        query,
      });
    },
    goodDetailGoods(query) {
      this.$router.push({
        path: "/mall/product",
        query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topBack {
  height: 100%;
  background-image: url("/images/10.png");
  background-size: cover;

  .end {
    height: 47px;
    background-color: #ffffff;

    // background-color: aqua;
    .common-tab {
      display: inline-block;
      background-color: red;
      width: 144px;
      height: 47px;
      background-color: #ffffff;
      line-height: 47px;
      text-align: center;
      font-family: "Source Han Sans CN Bold";
      font-weight: 700;
      font-size: 18px;
      color: #2b2b2b;
      position: relative;
      cursor: pointer;
    }

    .active-tab {
      display: inline-block;
      width: 144px;
      height: 47px;
      background-color: #ffffff;
      line-height: 47px;
      text-align: center;
      font-family: "Source Han Sans CN Bold";
      font-weight: 700;
      font-size: 18px;
      color: #1289ff;
      position: relative;
      cursor: pointer;
    }

    .goods-tab {
      display: inline-block;
      background-color: #1289ff;
      width: 230px;
      height: 47px;
      line-height: 47px;
      text-align: center;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 20px;
      color: #fff;
    }

    .bgc-bottom {
      display: inline-block;
      background-image: url("/images/20.png");
      background-repeat: no-repeat;
      width: 20px;
      height: 5px;
      position: absolute;
      bottom: 2px;
      right: 60px;
    }

    // span:nth-child(1) {
    //   display: inline-block;
    //   background-color: #1289ff;
    //   width: 230px;
    //   height: 47px;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN";
    //   font-weight: 400;
    //   font-size: 20px;
    //   color: #fff;
    // }
    // span:nth-child(2) {
    //   display: inline-block;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #1289ff;
    // }
    // span:nth-child(3) {
    //   display: inline-block;
    //   background-color: red;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #2b2b2b;
    // }
    // span:nth-child(4) {
    //   display: inline-block;
    //   background-color: red;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #2b2b2b;
    // }
    // span:nth-child(5) {
    //   display: inline-block;
    //   background-color: red;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #2b2b2b;
    // }
    // span:nth-child(6) {
    //   display: inline-block;
    //   background-color: red;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #2b2b2b;
    // }
    // span:nth-child(7) {
    //   display: inline-block;
    //   background-color: red;
    //   width: 144px;
    //   height: 47px;
    //   background-color: #ffffff;
    //   line-height: 47px;
    //   text-align: center;
    //   font-family: "Source Han Sans CN Bold";
    //   font-weight: 700;
    //   font-size: 18px;
    //   color: #2b2b2b;
    //   // h3 {
    //   //   display: inline-block;
    //   //   background-color: red;
    //   //   width: 144px;
    //   //   height: 47px;
    //   // }
    // }
  }

  .advantage {
    // background-color: red;
    display: flex;

    div {
      // background-color: #d3dce6;
      text-align: center;
      padding: 18px;

      H3 {
        font-size: 22px;
      }

      span {
        font-size: 14px;
      }
    }
  }

  .youLike {
    height: 873px;
    // background: #d3dce6;
    background-image: url("/images/35.png");
    background-size: cover;

    .youLike2 {
      display: flex;
      // flex-direction: column;
      // background-color: red;
      margin-top: 20px;
      flex-direction: column;

      .geton {
        display: flex;

        div {
          display: block;
          text-align: center;
          background-color: white;
          width: 340px;
          height: 54px;
          line-height: 10px;
          font-weight: 900;
        }
      }

      .bottom {
        margin-top: 35px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // background: red;
        height: 778px;

        .rightBottom {
          // background: greenyellow;
          width: 232px;
          height: 317px;
          margin-left: 1px;

          .upTitle {
            font-family: "Source Han Sans CN Medium";
            font-weight: 500;
            font-size: 16px;
            color: #2b2b2b;
            overflow: hidden;
            /* 隐藏超出容器大小的部分 */
            white-space: nowrap;
            /* 不换行 */
            text-overflow: ellipsis;
            /* 显示省略号 */
          }

          .boTitle {
            font-family: "Source Han Sans CN Bold";
            font-weight: 700;
            font-size: 20px;
            color: #ff6b00;
          }
        }
      }
    }
  }

  .comfort {
    display: flex;
    // flex-direction: column;
    // background-color: red;
    margin-top: 20px;
    height: 411px;
    flex-direction: column;

    .geton {
      display: flex;

      div {
        display: block;
        text-align: center;
        background-color: white;
        width: 340px;
        height: 54px;
        line-height: 27px;
        font-weight: 900;
      }
    }

    .bottom {
      margin-top: 35px;
      display: flex;

      .rightBottom {
        // background: greenyellow;
        width: 232px;
        height: 317px;
        margin-left: 20px;

        .upTitle {
          font-family: "Source Han Sans CN Medium";
          font-weight: 500;
          font-size: 16px;
          color: #2b2b2b;
          overflow: hidden;
          /* 隐藏超出容器大小的部分 */
          white-space: nowrap;
          /* 不换行 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }

        .boTitle {
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
      }
    }
  }

  .hardware {
    //五金工具样式
    display: flex;

    // background-color: red;
    margin-top: 20px;
    height: 758px;
    flex-direction: column;

    .geton {
      display: flex;

      div {
        display: block;
        text-align: center;
        background-color: white;
        width: 340px;
        height: 54px;
        line-height: 10px;
        font-weight: 900;
      }
    }

    .hard {
      display: flex;
      // flex-wrap: wrap;
    }

    .bottom {
      margin-top: 35px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 317px 317px;
      grid-gap: 20px;

      .rightBottom {
        // background: greenyellow;
        width: 232px;
        height: 317px;

        .upTitle {
          font-family: "Source Han Sans CN Medium";
          font-weight: 500;
          font-size: 16px;
          color: #2b2b2b;
          overflow: hidden;
          /* 隐藏超出容器大小的部分 */
          white-space: nowrap;
          /* 不换行 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }

        .boTitle {
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
      }
    }
  }

  .bargfain {
    display: flex;
    // flex-direction: column;
    // background-color: red;
    margin-top: 20px;
    height: 411px;
    flex-direction: column;

    .geton {
      display: flex;

      div {
        display: block;
        text-align: center;
        background-color: white;
        width: 340px;
        height: 54px;
        line-height: 27px;
        font-weight: 900;
      }
    }

    .bottom {
      margin-top: 35px;
      display: flex;

      .rightBottom {
        // background: greenyellow;
        width: 232px;
        height: 317px;
        margin-left: 20px;

        .upTitle {
          font-family: "Source Han Sans CN Medium";
          font-weight: 500;
          font-size: 16px;
          color: #2b2b2b;
          overflow: hidden;
          /* 隐藏超出容器大小的部分 */
          white-space: nowrap;
          /* 不换行 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }

        .boTitle {
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
      }
    }
  }

  .slideshow {
    height: 460px;
    // background-color: red;
    display: flex;
    justify-content: space-between;

    // padding: 20px;
    .login {
      padding: 16px 0;
      // background-color: red;
    }

    .left-wrap {
      width: 230px;
      height: 445px;
      overflow-y: scroll;
      background: #ffffff;
      padding: 15px 0 0 10px;

      .goods-wrap {
        margin-bottom: 20px;

        .title {
          font-family: "Source Han Sans CN Medium";
          font-weight: 700;
          font-size: 16px;
          text-align: left;
          color: #000000;
          margin-bottom: 10px;

          .right-line {
            background: transparent;
            font-weight: 900;
          }
        }

        .good-item {
          display: inline-flex;
          align-items: center;
          margin-right: 10px;
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 14px;
          text-align: left;
          color: #adadad;
          cursor: pointer;
        }

        .end-line {
          width: 2px;
          height: 20px;
          color: #adadad;
          margin: 0 5px 0 -2px;
        }
      }
    }

    .right-wrap {
      width: 230px;
      height: 100%;
      display: flex;
      /* 设置容器为Flex布局 */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;

      // margin: 10px 0;
      .userName {
        color: red;
      }
      .btnCar {
        margin: 0;
        padding: 0;
        width: 230px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        div span {
          color: #f74818;
          // font-weight: 700;
          font-size: 20px;
        }
        div p {
          color: #616161;
          font-size: 15px;
        }
      }
      span {
        font-family: "Source Han Sans CN Medium";
        font-weight: 700;
        font-size: 14px;
        color: #3c3c3c;
      }

      .btn-wrap {
        margin-top: 40px;
      }
    }

    .middle-wrap {
      flex: 1;
      height: 460px;
    }

    // padding: 20px;
    // div:nth-child(1) {
    //   width: 230px;
    //   height: 445px;
    //   background-color: aqua;
    // }
    // div:nth-child(2) {
    //   width: 747px;
    //   height: 430px;
    //   margin-top: 15px;
    //   margin-left: 16.5px;
    //   //   padding-top: 10px;
    //   background-color: yellow;
    // }
    // div:nth-child(3) {
    //   width: 230px;
    //   height: 430px;
    //   margin-top: 15px;
    //   background-color: fuchsia;
    //   margin-left: 16.5px;
    // }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      // line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
</style>

<style lang="scss">
.el-carousel__container {
  height: 430px;
  margin: 15px;
}

.el-carousel__indicators--horizontal {
  bottom: 40px !important;
}

.el-carousel__indicator--horizontal {
  .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}

.is-active {
  .el-carousel__button {
    width: 18px;
    height: 8px;
    border-radius: 4px;
  }
}

.el-button--primary {
  background: #1289ff;
  border-color: #1289ff;

  &:hover {
    background: #1289ff;
  }
}

/* 修改滚动条的宽度和颜色 */
::-webkit-scrollbar {
  width: 10px !important;
  border-radius: 2px !important;
}

::-webkit-scrollbar-thumb {
  background-color: #efefef !important;
}
</style>
